<template>
  <span>
    <template v-if="nodetype === 'button_box'">
      <ButtonBox :node="node" :formInfo="formInfo" />
    </template>

    <template v-else-if="nodetype === 'separator'">
      <b>{{ node.string }}</b>
    </template>

    <template v-else-if="nodetype === 'label'">
      <b>
        <template v-if="node.string"> {{ node.string }}: </template>
        <template v-else>
          <div>=====todo in tagNode======label</div>
          <div>{{ node.nodename }}</div>
          <div>{{ node }}</div>
        </template>
      </b>
    </template>
    <template v-else-if="nodetype === 'group'">
      <TagGroup
        :model="model2"
        :node="node"
        :formInfo="formInfo"
        @change="onChange"
      />
    </template>

    <template v-else-if="nodetype === 'notebook'">
      <TagNotebook
        :model="model2"
        :node="node"
        :formInfo="formInfo"
        @change="onChange"
      />
    </template>
    <template v-else-if="nodetype === 'odoofield-nolabel'">
      <OdooWidget
        v-model="model2[node.name]"
        :node="node"
        :formInfo="formInfo"
        @change="onChange"
      />
    </template>
    <template v-else-if="nodetype === 'odoofield'">
      <a-form-item
        :name="node.name"
        :label="node.string"
        :rules="field_rules(node)"
        :labelCol="{ style: 'fontWeight:bold' }"
        style="margin-bottom: 5px"
      >
        <OdooWidget
          v-model="model2[node.name]"
          :node="node"
          :formInfo="formInfo"
          @change="onChange"
        />
      </a-form-item>
    </template>

    <template v-else-if="nodetype === 'field'">
      <a-form-item
        :name="field_label(node).for"
        :label="field_label(node).string"
        :labelCol="{ style: 'fontWeight:bold' }"
        style="margin-bottom: 5px"
      >
        <template v-for="sub in node.children" :key="sub.nodename">
          <template v-if="sub.tagname !== 'label'">
            <TagNode
              :model="model2"
              :node="sub"
              :formInfo="formInfo"
              :oneRow="{
                name: field_label(node).for
              }"
              @change="onChange"
            />
          </template>
        </template>
      </a-form-item>
    </template>
    <template v-else-if="nodetype === 'one_row'">
      <div class="o_row">
        <template v-for="sub in node.children" :key="sub.nodename">
          <TagNode
            :model="model2"
            :node="sub"
            :formInfo="formInfo"
            :oneRow="oneRow"
            @change="onChange"
          />
        </template>
      </div>
    </template>
    <template v-else-if="nodetype === 'one_row-odoofield'">
      <OdooWidget
        v-model="model2[node.name]"
        :node="node"
        :formInfo="formInfo"
        @change="onChange"
      />
    </template>

    <template v-else-if="nodetype === 'one_row-odoofield-rest'">
      <OdooWidget
        v-model="model2[node.name]"
        :node="node"
        :formInfo="formInfo"
        @change="onChange"
      />
    </template>

    <template v-else-if="nodetype === 'one_row-else'">
      <div>=====todo in tagNode======one_row else</div>
      <div>{{ node.nodename }} {{ [oneRow] }}</div>
      <div>{{ node }}</div>
    </template>

    <template v-else-if="nodetype === 'button'">
      <TagButton :node="node" :formInfo="formInfo" />
    </template>

    <template v-else-if="h5tags.includes(nodetype)">
      <component :is="nodetype">
        <template v-if="node.text">
          {{ node.text }}
        </template>

        <template v-for="sub in node.children" :key="sub.nodename">
          <TagNode
            :model="model2"
            :node="sub"
            :formInfo="formInfo"
            :oneRow="oneRow"
            @change="onChange"
          />
        </template>
      </component>
    </template>

    <template v-else-if="nodetype === 'widget'">
      <h2>{{ node.title || node.text || 'todo widget' }}</h2>
    </template>

    <template v-else>
      <div>==todo in tagNode======node</div>
      <div>{{ nodetype }}</div>
      <div>{{ node.nodename }} {{ [oneRow] }}</div>
      <div>{{ node }}</div>
    </template>
  </span>
</template>
<script setup>
import ButtonBox from './ButtonBox.vue'
import TagGroup from './TagGroup.vue'
import TagNotebook from './TagNotebook.vue'
import TagButton from './TagButton.vue'

import OdooWidget from '@/odoojs-antdv/OWidget/OdooWidget.vue'

import { computed } from 'vue'

const props = defineProps(['model', 'node', 'formInfo', 'oneRow'])
const emit = defineEmits(['change'])

const model2 = computed({
  get() {
    return props.model || {}
  },

  // eslint-disable-next-line no-unused-vars
  set(val) {
    // state.mVal = {...}
  }
})

const h5tags = ['div', 'span', 'h1', 'h2', 'h3', 'b', 'p']

const h5tagsOneRow = ['div', 'span']

const nodetype = computed(() => {
  const nodename = props.node.nodename
  const tagname = props.node.tagname

  if (props.oneRow) {
    if (props.node.class === 'o_row') {
      return 'one_row'
    } else if (tagname === 'odoofield') {
      if (props.node.name === props.oneRow.name) {
        return 'one_row-odoofield'
      } else {
        return 'one_row-odoofield-rest'
      }
    } else if (h5tagsOneRow.includes(tagname)) {
      return tagname
    } else {
      return 'one_row-else'
    }
  } else if (nodename === '_div_button_box') {
    return 'button_box'
  } else if (tagname === 'odoofield') {
    if (props.node.nolabel) {
      return 'odoofield-nolabel'
    } else {
      return 'odoofield'
    }
  } else if (tagname === 'widget') {
    return 'widget'
  } else if (tagname === 'field') {
    return 'field'
  } else if (tagname === 'label') {
    return 'label'
  } else if (tagname === 'group') {
    return 'group'
  } else if (tagname === 'notebook') {
    return 'notebook'
  } else if (tagname === 'button') {
    return 'button'
  } else if (tagname === 'separator') {
    return 'separator'
  } else if (h5tags.includes(tagname)) {
    return tagname
  } else {
    return 'todo'
  }
})

function field_rules(node) {
  if (!node.required) return undefined
  return [
    {
      required: true,
      message: `请输入 ${node.string}!`
    }
  ]
}

function field_label(node) {
  // console.log(node)
  const children = node.children || {}
  const labels = Object.keys(children).filter(
    item => children[item].tagname === 'label'
  )
  if (labels.length) {
    return children[labels[0]]
  } else {
    return {}
  }
}

function onChange(fname, value) {
  // console.log('onChange  ', fname, value)
  emit('change', fname, value)
}
</script>

<style scoped></style>
